<template>
  <view>
    <TnNavbar fixed back-icon="" home-icon="" :center="false">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center justify-between" style="height: 100%;position: relative">
        <image :src="pmAvatar" style="width: 65rpx; height: 65rpx;border-radius: 100%"></image>
        <input
            style="border: 1px solid #eee; height: 65rpx; border-radius: 65rpx;width: calc(100% - 75rpx);padding-left: 50rpx;"
            placeholder="请输入搜索内容"
            confirm-type="search"
            @confirm="search"
            v-model="where.name"
        >
        <tn-icon name="search" style="position: absolute;left: 110rpx; top: 50%; transform: translateY(-50%)"></tn-icon>
      </view>
    </TnNavbar>
    <!-- 广告 -->
<!--    <view style="position: fixed; z-index: 10;right: 5px; bottom: 120px">-->
<!--      <ad-custom unit-id="adunit-ba3a39bfe6790318"></ad-custom>-->
<!--    </view>-->
    <scroll-view
        scroll-y
        :style="{height: `calc(100vh - ${height + safeBottom + 70}px)`}"
        :scroll-into-view="topItem"
        scroll-with-animation
        @scroll="handleScroll"
    >
      <view id="top"></view>
      <view class="tn-flex tn-flex-wrap">
        <template v-for="item in list" :key="item.id">
          <view style="width: 33%" class="tn-p-sm tn-flex tn-flex-column justify-center items-center" @click="gotoDetail(item)">
            <view
                :style="{backgroundImage: `url(${item.image})`}"
                style="background-size: cover;background-repeat: no-repeat;width: 100px;height: 100px;background-position: center"
            >
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis-1">{{ item.name }}</text>
            </view>
          </view>
        </template>
      </view>
      <view class="back" :style="{display: scrollTop > 500 ? 'flex' : 'none'}" @click.stop="scrollToTop">
        <TnIcon name="totop-simple" style="font-size: 25px"/>
      </view>
      <view class="tn-flex-center">
        <TnButton text @click="loadMore" debounce :disabled="showLoading">
          {{ status === 'loadmore' ? '点击加载更多' : status === 'loading' ? '正在加载' : '到底啦~' }}
        </TnButton>
      </view>
    </scroll-view>

    <view class="cu-modal" :class=" showDetail ? 'show' : ''" @click="showDetail = false">
      <view class="cu-dialog tn-text-left" @click.stop="" v-if="current" style="background-color: #182f4d">
        <view class="tn-p-sm flex justify-between">
          <view>
            <image src="/static/title.png" style="width: 10px;height: 10px"></image>
            <text style="color: #b7cdfe;margin-left: 5px">{{ current.name }}</text>
          </view>
          <TnIcon name="close" color="#b7cdfe" @click="showDetail = false"></TnIcon>
        </view>
        <view class="tn-p-sm flex tn-pt-0 justify-between">
          <view
              :style="{backgroundImage: `url(${current.image})`}"
              style="
                background-size: cover;
                background-repeat: no-repeat;
                width: 45%;
                height: 150px;
                background-position: center
              "
          ></view>
          <view style="width: 50%">
            <view>
              <image src="/static/title.png" style="width: 10px;height: 10px"></image>
              <text style="color: #b7cdfe;margin-left: 5px">套装描述</text>
            </view>
            <view style="padding: 10px;color: #b7cdfe;" class="text-df">
              {{ current.suitdes }}
            </view>
          </view>
        </view>
        <view>
          <view class="padding-sm">
            <image src="/static/title.png" style="width: 10px;height: 10px"></image>
            <text style="color: #b7cdfe;margin-left: 5px">套装部件</text>
          </view>
          <view class="flex flex-wrap padding-lr-sm">
            <view class="flex justify-center items-center" style="width: 20%" v-for="item in current.cloths_url">
              <view style="padding: 5px;border: 1px solid #405b94;width: 60px;height: 60px"
                    class="flex align-center justify-center">
                <view
                    :style="{backgroundImage: `url(${item})`}"
                    style="
                      width: 50px;
                      height: 35px;
                      background-size: cover;
                      background-repeat: no-repeat;
                      background-position: center;
                    "
                >
                </view>
              </view>
            </view>
          </view>
        </view>
        <view>
          <view class="padding-sm">
            <image src="/static/title.png" style="width: 10px;height: 10px"></image>
            <text style="color: #b7cdfe;margin-left: 5px">套装效果</text>
          </view>
          <view class="padding-lr-sm padding-bottom-sm" style="color: #b7cdfe;">
            <template v-if="current.spare_part">
              {{ current.spare_part[0].desc }}
            </template>
            <template v-else>
              无装扮效果
            </template>
          </view>
        </view>
      </view>
    </view>
    <loading-page :show="showLoading" @click.stop=""/>
  </view>
</template>

<script setup>
  import {getCurrentInstance, onMounted, computed, ref, reactive, nextTick} from "vue";
  import {useUniAppSystemRectInfo} from "../../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import TnNavbar from "../../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import LoadingPage from "../../../components/loadingPage.vue";
  import TnButton from "../../../uni_modules/tuniaoui-vue3/components/button/src/button.vue";
  import TnIcon from "../../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue";

  const {
    proxy
  } = getCurrentInstance()

  const pmAvatar = __wxConfig.accountInfo.icon

  const showLoading = ref(false)

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)


  // 初始数据
  const list = ref([])
  // 分页数据
  const where = reactive({
    page: 1,
    limit: 21,
    name: '',
    sort: 'id',
    order: 'desc'
  })
  const totalPages = ref(0)
  const getList = async () => {
    showLoading.value = true;
    if (where.page === 1) {
      ({records: list.value, pages: totalPages.value} = await proxy.$api.getSuitQuery(where))
    } else {
      const {records} = await proxy.$api.getSuitQuery(where)
      list.value.push(...records)
    }
    showLoading.value = false
  }

  // 触底触发
  const loadMore = async () => {
    if (status.value === 'loading') return
    if (status.value === 'loadmore') {
      where.page++
      await getList()
    } else {
      showLoading.value = false
    }
  }

  // 滚动触发
  const scrollTop = ref(0)
  const topItem = ref('')
  const handleScroll = (ev) => {
    scrollTop.value = ev.detail.scrollTop
    topItem.value = ''
  }

  // 返回顶部
  const scrollToTop = () => {
    nextTick(() => {
      topItem.value = 'top'
      scrollTop.value = 0
    })
  }

  // 搜索
  const search = async () => {
    where.page = 1
    await getList()
  }

  const status = computed(() => {
    if (showLoading.value) {
      return 'loading'
    } else if (where.page < totalPages.value) {
      return 'loadmore'
    } else {
      return 'nomore'
    }
  })

  const showDetail = ref(false)
  const current = ref(null)

  const gotoDetail = (item) => {
    current.value = item
    showDetail.value = true
  }

  onMounted(async () => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    await getList()
  })
</script>

<style scoped lang="scss">
  .back {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    position: fixed;
    right: 5px;
    bottom: 120px;
    z-index: 10001;
  }
</style>
